<template>
	<div class="container">
		<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner" v-for="(item,i) in list">
						<mt-switch v-model="$store.getters.getGoodsSelected[item.id]"
						 @change="changed(item.id,$store.getters.getGoodsSelected[item.id])"></mt-switch>
						<img class="image" :src="item.url" />
						<div class="info">
							<h5>{{item.title}}</h5>
							<p>
								<span class="price">￥{{item.price}}</span>
								<numbox  style="height:25px" :num="item.count" :goodsid="item.id"></numbox>
								<a href="#" @click.prevent="remove(item.id,i)">删除</a>
							</p>
						</div>
					</div>
				</div>
			</div>
			<!-- 结算区 -->
			<div class="mui-card">
					<div class="mui-card-header">
						<p>总计：不含运费|</p><br/>
						<p>已勾选商品 <span class="red">{{$store.getters.getSum.count}}</span> 件，总价  <span class="red">￥{{$store.getters.getSum.amount}}</span> </p>
					</div>
					<div class="mui-card-content">
						<div class="mui-card-content-inner">		
						<mt-button type="danger" size="small" @click="getMore(id)">去结算</mt-button>
						</div>
					</div>
				</div>
	</div>
	
	
</template>

<script>
	import numbox from '../subcomponent/subCar.vue'
	export default({
		data(){
			return {
				list:[],
			}
		},
		created(){
			this.getCar()
		},
		methods:{
			getCar(){
				var arr = JSON.parse(localStorage.getItem('car'))
				arr.forEach((item,index)=>{
					this.list.push(arr[index])
				})
			},
			remove(id,index){//点击删除，把商品从store中根据传递的id删除，同时当前组价中的goodsinfo，利用index删除
			this.list.splice(index,1)
			this.$store.commit('removeCar',id)
			},
			changed(id,val){//同步开关最新状态
				this.$store.commit('updateGoodsSel',{id:id,selected:val})
			}
		},
		components: {
			numbox
		},
	})
</script>

<style scoped>
	.image{
		width: 60px;
		height: 60px;
	}
	.price{
		color: red;
		display: inline-block;
		width: 100px;
		}
		.mui-card-content-inner{
			display: flex;
		}
		h6{
			margin-bottom: 8px;
		}
		.mui-card{
			display: flex;
			justify-content: space-between;
		}
		.red{
			color: red;
			font-weight: 100;
			}
</style>
